<template>
	<view class="setting-page">
		<view class="line-area">
			<view class="setting-item header">
				<view class="setting-left"> 头像</view>
				<view class="setting-right set-header-img" @click="chooseimg">
					<view class="header-img">
						<image :src="avatar" class="img"></image>
					</view>
				</view>
			</view>
			<view class="setting-item">
				<view class="setting-left">用户名</view>
				<view class="setting-right">
					<van-cell-group inset>
						<van-field disabled  v-model="username" input-align="right" />
					</van-cell-group>
				</view>
			</view>
			<view class="setting-item">
				<view class="setting-left">姓名</view>
				<view class="setting-right">
					<van-cell-group inset>
						<van-field v-model="name" input-align="right" />
					</van-cell-group>
				</view>
			</view>
			<view class="setting-item">
				<view class="setting-left">手机号码</view>
				<view class="setting-right">
					<van-cell-group inset>
						<van-field v-model="phone" input-align="right" />
					</van-cell-group>
				</view>
			</view>
		</view>
		<view class="setting-item">
			<view class="setting-left">隐藏个人信息</view>
			<view class="setting-right"><van-switch v-model="checked" @change="onswitch" /> </view>
		</view>
		<view class="exit" @click="onsure">
			确认修改
		</view>
		<view>


		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import api from '../../lib/request';
	import {showConfirmDialog, showToast} from 'vant';
	import {user} from '../../pinia/user.js'

	const User = user()
	let photo = ref('false')
	// 开关状态
	let checked = ref(true); // switch状态
	let show = ref(false);
	// let usermsg = ref(User.userMsg)
	let phone = ref(User.userMsg.phone)
	let avatar = User.userMsg.avatar ? ref(User.userMsg.avatar) : ref('../../static/mineimg/默认头像1.png')
	let username = User.userMsg.username ? ref(User.userMsg.username)  : ref('暂无')
	let name = User.userMsg.name ? ref(User.userMsg.name) :ref('暂无')
	// 备份原始姓名和电话
	let oldname = JSON.parse(JSON.stringify(name.value))
	let oldtel = JSON.parse(JSON.stringify(phone.value))
	// 点击切换头像
	function chooseimg() {
		uni.chooseImage({
			count: 1,
			sourceType: ['album '],
			success: function(res) {
				let tempFilePaths = res.tempFilePaths
				const uploader = uni.uploadFile({
					url: '/api/admin/common/upload',
					filePath: tempFilePaths[0],
					name: 'file',
					header:{
						'authentication': uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
						let {
							code,
							data
						} = uploadFileRes
						let da = JSON.parse(data)
						avatar.value = da.data
						console.log(avatar.value);
					}
				})
			}
		})
	};
	
	// 确认修改信息
	function onsure() {
		let par = {
			avatar: avatar.value,
			username: username.value,
			name: checked.value ?  name.value : oldname,
			phone: checked.value ?  phone.value:oldtel
		}
		console.log(par)
		showConfirmDialog({
				title: '确认修改',
				message: '您确定要修改信息吗?',
			})
			.then(() => {
				api.update('/user/user/update', par).then(res => {
					if(res.code){
					let mm = User.userMsg
					mm.avatar = avatar.value
					mm.name = name.value
					mm.username = username.value
					mm.phone = phone.value
					User.updateUserMsg(mm)
					showToast('个人信息修改成功')
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/mine-page/mine-page'
						})
					},1500)
					}
					
				})
			})
			.catch(() => {});
	}



	// 开关切换
	function onswitch() {
		if (checked.value) {
			name.value = oldname
			phone.value= oldtel
		} else {
			// 正则匹配电话号码隐藏
			let ph = oldtel
			phone.value= ph.replace(/^(\d{3})\d+(\d{4})$/, "$1****$2")
			let newStr = oldtel;
			if (oldname.length === 2) {
				name.value = oldname.substr(0, 1) + '*';
			} else if (oldname.length > 2) {
				let char = '';
				for (let i = 0, len = oldname.length - 1; i < len; i++) {
					char += '*'
				}
				name.value = oldname.substr(0, 1) + char;
			}
		
		}

	}


	


</script>

<style lang="scss" scoped>
	.setting-page {
		width: 100%;
		height: calc(100vh - 44px);
		background-color: #f7fffd;
	}

	.line-area {
		width: 100%;
		padding: 10px 0;
	}

	.img {
		    width: 85px;
		    height: 85px;
		    position: absolute;
		    top: 0px;
		    left: 0px;
	}

	.setting-item {
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		border-bottom: 1px solid #eee;
		padding: 15px 10px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.setting-right {
		color: royalblue;
		display: flex;
		justify-content: space-between;
	}

	.header {
		padding: 0 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.set-header-img {
		position: relative;
		top: 0;
		left: -100px;
		background-color: red;
		height: 80px;
		z-index: 10;
	}

	.header-img {
		width: 80px;
		height: 80px;
		position: absolute;
		z-index: -1;
		box-sizing: border-box;
		padding: 10px;
		border-radius: 50%;
		overflow: hidden;
	}

	.exit {
		width: 100%;
		height: 50px;
		margin-top: 10px;
		background-color: #fff;
		line-height: 50px;
		text-align: center;
		font-size: 18px;
	}

	.inp {
		width: 120px;
	}
</style>